import { withRouter } from "react-router";
import { Component } from "refast";
import logic from "./logic";
import dialogLogic from "./dialogLogic";
import Dialog from "uxcore-dialog";
import Button from "uxcore-button";
import Grid from "uxcore-grid";
import { Row, Col } from "uxcore-grid";
import TopData from "./topdata";
import TopData2 from "./topdata2";
import Xmzb from "./xmzb";
import Rycfd from "./rycfd";
import Rymdd from "./rymdd";
import FgxmDialog from "./dialog/Fgxm/FgxmDialog";
import XzxmDialog from "./dialog/Xzxm/XzxmDialog";
import SmrzDialog from "./dialog/Smrz/SmrzDialog";
import FgjgDialog from "./dialog/Fgjg/FgjgDialog";
import { REAL_NAME_KEY, FGJG_NAME_KEY_MAP } from "./const";

import "./PageFgfc.less";

class PageFgfc extends Component {
  constructor(props) {
    super(props, [logic, dialogLogic]);

    this.handleCountPieClick = this.handleCountPieClick.bind(this);
    this.handlePageChange = this.handlePageChange.bind(this);
    this.handleShztSearch = this.handleShztSearch.bind(this);
    this.handleMapTabChange = this.handleMapTabChange.bind(this);
    this.handleFgCountClick = this.handleFgCountClick.bind(this);
    this.handleXzxmCountClick = this.handleXzxmCountClick.bind(this);
    this.handleXzxmPageChange = this.handleXzxmPageChange.bind(this);
    this.handleFgjgPageChange = this.handleFgjgPageChange.bind(this);
    this.handleRealNameCountClick = this.handleRealNameCountClick.bind(this);
    this.handleRealNamePageChange = this.handleRealNamePageChange.bind(this);
    this.handlePhotoClick = this.handlePhotoClick.bind(this);
    this.handleFgjgCountClick = this.handleFgjgCountClick.bind(this);
    this.handleDistrictEngCountBarClick = this.handleDistrictEngCountBarClick.bind(
      this
    );
  }

  componentWillMount() {
    this.dispatch("init");
  }

  componentDidMount() {
    // 每小时更新一次数据
    this.timerID = setInterval(() => this.dispatch("init"), 60 * 60 * 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state || {};
    if (
      Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length
    ) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

  // handleDistrictEngCountBarEvents = {
  //   click: this.handleDistrictEngCountBarClick.bind(this),
  // };

  // 区域复工率柱状图点击
  handleDistrictEngCountBarClick(e) {
    this.dispatch("showDialog", { visible: true, title: e.name });
    this.handleMapTabChange('E');
  }

  // 饼图点击
  handleCountPieClick() {
    this.dispatch("showDialog", { visible: true, title: "全市" });
    this.handleMapTabChange('E');
  }

  handlePageChange(currentPage, pageSize) {
    this.dispatch("pageChange", {
      currentPage,
      pageSize,
      visible: this.state.dVisible,
      title: this.state.dTitle,
      shzt: this.state.dShzt,
    });
  }

  handleFgjgPageChange(currentPage, pageSize) {
    this.dispatch("fgjgPageChange", {
      currentPage,
      pageSize,
      dwlb: FGJG_NAME_KEY_MAP[this.state.fgjgDialog.type].dwlb,
    });
  }

  handleShztSearch(shzt) {
    this.dispatch("pageChange", {
      currentPage: 1,
      pageSize: 10,
      visible: this.state.dVisible,
      title: this.state.dTitle,
      shzt,
    });
  }

  handleFgjgCountClick(key) {
    this.dispatch("showFgjgDialog", {
      visible: true,
      ...FGJG_NAME_KEY_MAP[key],
    });
  }

  handleFgCountClick(shzt) {
    this.dispatch("showDialog", { visible: true, title: "全市", shzt });
  }

  handleXzxmCountClick(shzt) {
    this.dispatch("showXzxmDialog", { visible: true, shzt });
  }

  handleXzxmPageChange(currentPage, pageSize) {
    this.dispatch("xzxmPageChange", {
      currentPage,
      pageSize,
      shzt: this.state.xzxmDialog.shzt,
    });
  }

  /**
   * 实名认证弹框table翻页
   * @param {当前页} currentPage
   * @param {每页数量} pageSize
   */
  handleRealNamePageChange(key, currentPage, pageSize) {
    this.dispatch("realNamePageChange", { key, currentPage, pageSize });
  }

  handlePhotoClick({ url, whRate }) {
    this.dispatch("showPhotoDialog", { visible: true, url, whRate });
  }

  convertEngCountData(data) {
    return data.map((item) => {
      if (item.value >= 0 && item.value < 20) {
        return {
          ...item,
          itemStyle: {
            normal: {
              color: "#CDC9C9",
            },
          },
        };
      }
      if (item.value >= 20 && item.value < 40) {
        return {
          ...item,
          itemStyle: {
            normal: {
              color: "#EE2C2C",
            },
          },
        };
      }
      if (item.value >= 40 && item.value < 60) {
        return {
          ...item,
          itemStyle: {
            normal: {
              color: "#EE9A00",
            },
          },
        };
      }
      if (item.value >= 60 && item.value < 80) {
        return {
          ...item,
          itemStyle: {
            normal: {
              color: "#436EEE",
            },
          },
        };
      }
      if (item.value >= 80) {
        return {
          ...item,
          itemStyle: {
            normal: {
              color: "#00CD00",
            },
          },
        };
      }
    });
  }

  // 修改echarts地图选项
  handleMapTabChange(tabKey) {
    const { onFgfcMapTabsChange } = this.props;
    if (onFgfcMapTabsChange) {
      onFgfcMapTabsChange({ mapSelected: tabKey });
    }
  }

  /**
   * 实名制人数点击
   * @param {点击的key值} clickKey
   */
  handleRealNameCountClick(clickKey) {
    if (Object.keys(REAL_NAME_KEY).includes(clickKey)) {
      this.dispatch("showRealNameDialog", {
        visible: true,
        ...REAL_NAME_KEY[clickKey],
      });
    } else if (clickKey === "CFD" || clickKey === "MDD") {
      const { bottomContentTag } = this.state;
      const tag = bottomContentTag === clickKey ? "XMZB" : clickKey;
      this.dispatch("showBottomCount", {
        bottomContentTag: tag,
      });
      let tabKey = null;
      if (tag === 'CFD') {
        tabKey = 'A'
      } else if (tag === 'MDD') {
        tabKey = 'D';
      } else {
        tabKey = 'E';
      }
      this.handleMapTabChange(tabKey);
    } else if (clickKey === 'YDG') {
      // 累计已到岗点击
      const { onLjdgCountClick } = this.props;
      if (onLjdgCountClick) {
        onLjdgCountClick();
      }
    }
  }

  renderBottomContent() {
    const { bottomContentTag } = this.state;
    if (bottomContentTag === "XMZB") {
      return (
        <Row className="page-fgfc-show-grid">
          <Col xs={24} md={24}>
            <div className="page-fgfc-bottom">
              <Xmzb
                data={{
                  pie: this.state.districtEngCountPie,
                  bar: this.state.districtEngCountBar,
                }}
                onCountPieClick={this.handleCountPieClick}
                onDistrictEngCountBarClick={this.handleDistrictEngCountBarClick}
              />
            </div>
          </Col>
        </Row>
      );
    }
    if (bottomContentTag === "CFD") {
      return (
        <Row className="page-fgfc-show-grid">
          <Col xs={8} md={8}>
            <div className="page-fgfc-bottom">
              <Rycfd
                title="全国现居住地明细"
                jsxdata={{
                  data: this.state.rycfd.cn,
                }}
              />
            </div>
          </Col>
          <Col xs={8} md={8}>
            <div className="page-fgfc-bottom">
              <Rycfd
                title="湖北省内现居住地明细"
                jsxdata={{
                  data: this.state.rycfd.hb,
                }}
              />
            </div>
          </Col>
          <Col xs={8} md={8}>
            <div className="page-fgfc-bottom">
              <Rycfd
                title="宜昌市内现居住地明细"
                jsxdata={{
                  data: this.state.rycfd.yc,
                }}
              />
            </div>
          </Col>
        </Row>
      );
    }
    if (bottomContentTag === "MDD") {
      return (
        <Row className="page-fgfc-show-grid">
          <Col xs={24} md={24}>
            <div className="page-fgfc-bottom">
              <Rymdd title="返岗人员目的地明细" data={this.state.rymdd.yc} />
            </div>
          </Col>
        </Row>
      );
    }
  }

  render() {
    return (
      <div className="page-fgfc">
        <Grid fluid={true}>
          <Row className="page-fgfc-show-grid">
            <Col xs={24} md={17} className="page-fgfc-top-col-left">
              <div className="page-fgfc-top-wrap-left">
                <TopData2
                  data={this.state}
                  onCountClick={this.handleRealNameCountClick}
                />
              </div>
            </Col>
            <Col xs={24} md={7} className="page-fgfc-top-col-right">
              <div className="page-fgfc-top-wrap-right">
                <TopData
                  onMapTabsChange={this.handleMapTabChange}
                  onFgCountClick={this.handleFgCountClick}
                  onXzxmCountClick={this.handleXzxmCountClick}
                  onFgjgCountClick={this.handleFgjgCountClick}
                  data={this.state}
                />
              </div>
            </Col>
          </Row>
          {this.renderBottomContent()}
        </Grid>

        <Dialog
          className="dialog-parent"
          visible={this.state.dVisible}
          title={`${this.state.dTitle}复工项目详情`}
          width={this.state.dWidth}
          onCancel={() =>
            this.dispatch("showDialog", { visible: false, title: null })
          }
          footer={[
            <Button
              key="close"
              onClick={() =>
                this.dispatch("showDialog", { visible: false, title: null })
              }
              size="small"
            >
              关闭
            </Button>,
          ]}
        >
          <div style={{ width: "100%", height: this.state.dHeight }}>
            <FgxmDialog
              onPageChange={this.handlePageChange}
              onShztChange={this.handleShztSearch}
              data={this.state.dialogData}
              shzt={this.state.dShzt}
            />
          </div>
        </Dialog>

        <Dialog
          className="dialog-parent"
          visible={this.state.xzxmDialog.visible}
          title={`今日新增复工项目详情（${
            this.state.xzxmDialog.shzt || "全部"
          }）`}
          width={this.state.xzxmDialog.width}
          onCancel={() =>
            this.dispatch("showXzxmDialog", { visible: false, title: null })
          }
          footer={[
            <Button
              key="close"
              onClick={() =>
                this.dispatch("showXzxmDialog", { visible: false, title: null })
              }
              size="small"
            >
              关闭
            </Button>,
          ]}
        >
          <div style={{ width: "100%", height: this.state.xzxmDialog.height }}>
            <XzxmDialog
              onPageChange={this.handleXzxmPageChange}
              data={this.state.xzxmDialog}
            />
          </div>
        </Dialog>

        <Dialog
          className="dialog-parent"
          visible={this.state.realNameDialog.visible}
          title={
            this.state.realNameDialog.title
              ? `全市实名制人员（${this.state.realNameDialog.title}）`
              : "全市实名制人员"
          }
          width={this.state.realNameDialog.width}
          onCancel={() =>
            this.dispatch("showRealNameDialog", {
              visible: false,
              title: null,
              key: null,
            })
          }
          footer={[
            <Button
              key="close"
              onClick={() =>
                this.dispatch("showRealNameDialog", {
                  visible: false,
                  title: null,
                  key: null,
                })
              }
              size="small"
            >
              关闭
            </Button>,
          ]}
        >
          <div
            style={{ width: "100%", height: this.state.realNameDialog.height }}
          >
            <SmrzDialog
              onPageChange={this.handleRealNamePageChange}
              data={this.state.realNameDialog}
              onPhotoClick={this.handlePhotoClick}
            />
          </div>
        </Dialog>

        <Dialog
          className="dialog-parent"
          visible={this.state.photoDialog.visible}
          width={
            this.state.photoDialog.height * this.state.photoDialog.whRate + 48
          }
          onCancel={() =>
            this.dispatch("showPhotoDialog", { visible: false, url: null })
          }
          footer={[
            <Button
              key="close"
              onClick={() =>
                this.dispatch("showPhotoDialog", { visible: false, url: null })
              }
              size="small"
            >
              关闭
            </Button>,
          ]}
        >
          <div style={{ width: "100%", height: "100%" }}>
            <img
              src={this.state.photoDialog.photoUrl}
              width={
                this.state.photoDialog.height * this.state.photoDialog.whRate
              }
              height={this.state.photoDialog.height}
            />
          </div>
        </Dialog>

        <Dialog
          className="dialog-parent"
          visible={this.state.fgjgDialog.visible}
          title={`复工机构详情（${this.state.fgjgDialog.title}）`}
          width={this.state.fgjgDialog.width}
          onCancel={() =>
            this.dispatch("showFgjgDialog", { visible: false, title: null })
          }
          footer={[
            <Button
              key="close"
              onClick={() =>
                this.dispatch("showFgjgDialog", { visible: false, title: null })
              }
              size="small"
            >
              关闭
            </Button>,
          ]}
        >
          <div style={{ width: "100%", height: this.state.fgjgDialog.height }}>
            <FgjgDialog
              onPageChange={this.handleFgjgPageChange}
              data={this.state.fgjgDialog}
            />
          </div>
        </Dialog>

      </div>
    );
  }
}

export default withRouter(PageFgfc);
